<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css" />
</head>
<style>
    .yizhu_detail {
        width: 94%;
        padding: 0.8rem 3%;
        height: 9.5rem;
        background-color: #fff;
        font-size: 0.6rem;
        outline: none;
    }

    .nums {
        font-size: 0.6rem;
        color: #565656;
        position: absolute;
        right: 0.8rem;
        top: 10rem;
    }

    .nums span {
        color: #2780e8;
    }

    .save_always_yizhu {
        background-color: #fff;
        height: 3rem;
        line-height: 3rem;
        width: 95%;
        padding-left: 5%;
        color: #565656;
        font-size: 0.7rem;
    }

    .save_always_yizhu img {
        width: 1rem;
        height: 1rem;
        margin-right: 0.3rem;
        margin-top: -0.1rem;
    }

    .select_tab {
        width: 100%;
        background-color: #fff;
        height: 2.7rem;
        line-height: 2.7rem;
    }

    .select_tab span {
        display: inline-block;
        color: #565656;
        font-size: 0.7rem;
        width: 49%;
        text-align: center;
    }

    .tab_active {
        color: #FD6150 !important;
    }

    .yizhu_shuru {
        width: 100%;
    }

    .yizhu_shuru .yizhu_title {
        padding: 0.8rem;
        color: #565656;
        font-size: 0.7rem;
    }

    .yizhu_shuru .yizhu_div {
        padding: 0 1rem;
    }

    .yizhu_shuru .yizhu_div .yizhu_div_item {
        padding: 0.3rem 0.5rem;
        background-color: #fff;
        color: #565656;
        font-size: 0.6rem;
        display: inline-block;
        margin-right: 0.7rem;
        border: 1px solid #E8E8E8;
        border-radius: 0.5rem;
        margin-bottom: 0.5rem;
    }


    .always_yizuh {
        padding: 0.5rem 0.8rem;
    }

    .always_yizuh .always_yizuh_item {
        font-size: 0.6rem;
        padding: 0.3rem 0.5rem;
        border-radius: 0.5rem;
        display: inline-block;
        border: 1px solid #e8e8e8;
        background-color: #fff;
        margin-top: 0.5rem;
        margin-right: 1rem;
    }
</style>

<body>
    <div  id="app" v-cloak>
        <div class="placeholder_div"></div>
        <p class="nums"><span>{{yizhu_detail_length}}</span>/ 300</p>
        <textarea class="yizhu_detail" v-model="yizhu_detail" maxlength="300"
            placeholder="服药时间、忌口与禁忌、用药注意事项等（药房和患者均可见）"></textarea>
        <div class="placeholder_div"></div>

        <p class="save_always_yizhu" @click="checked_radio=checked_radio?false:true">
            <img :src="checked_radio ?'../image/icon_radio_checked.png':'../image/icon_radio.png'" alt="">
            存为常用医嘱
        </p>

        <div class="select_tab">
            <span class="tab_active" onclick="select_tab(this,0)">快捷输入</span>
            <!-- <span onclick="select_tab(this,1)">常用医嘱</span> -->
        </div>

        <div class="yizhu_shuru" v-if="select_tab_index == 0">
            <p class="yizhu_title">服药时间</p>
            <div class="yizhu_div">
                <div class="yizhu_div_item" @click="add_yizhu('饭前一小时服，')">饭前一小时服</div>
                <div class="yizhu_div_item" @click="add_yizhu('饭后半小时服，')">饭后半小时服</div>
                <div class="yizhu_div_item" @click="add_yizhu('晨起服，')">晨起服</div>
                <div class="yizhu_div_item" @click="add_yizhu('空腹服，')">空腹服</div>
            </div>


            <p class="yizhu_title">忌口与禁忌</p>
            <div class="yizhu_div">
                <div class="yizhu_div_item" @click="add_yizhu('无，')">无</div>
                <div class="yizhu_div_item" @click="add_yizhu('忌辛辣，')">忌辛辣</div>
                <div class="yizhu_div_item" @click="add_yizhu('忌油腻，')">忌油腻</div>
                <div class="yizhu_div_item" @click="add_yizhu('忌生冷，')">忌生冷</div>
                <div class="yizhu_div_item" @click="add_yizhu('忌刺激性食物，')">忌刺激性食物</div>
                <div class="yizhu_div_item" @click="add_yizhu('禁光敏性食物，')">禁光敏性食物</div>
                <div class="yizhu_div_item" @click="add_yizhu('忌难消化食物，')">忌难消化食物</div>
                <div class="yizhu_div_item" @click="add_yizhu('备孕禁服，')">备孕禁服</div>
                <div class="yizhu_div_item" @click="add_yizhu('怀孕禁服，')">怀孕禁服</div>
                <div class="yizhu_div_item" @click="add_yizhu('经期停服，')">经期停服</div>
                <div class="yizhu_div_item" @click="add_yizhu('感冒停服，')">感冒停服</div>
                <div class="yizhu_div_item" @click="add_yizhu('忌与西药同服，')">忌与西药同服</div>
            </div>


        </div>

        <div class="always_yizuh" v-else>
            <div class="always_yizuh_item" v-for="item in yizhu_info" @click="add_yizhu(item.content + '，')">
                {{item.content}}
            </div>

        </div>
    </div>
</body>

</html>
<script src="../script/set_root.js"></script>

<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/zepto.min.js"></script>
<script type="text/javascript" src="../script/hb.js"></script>
<script type="text/javascript" src="../script/vue.js"></script>
<script type="text/javascript">
    apiready = function () {
        hb_ready();

        // getData() // 获取医嘱数据

        // 从开方页面点击进来时填充内容到输入域
        app.yizhu_detail = api.pageParam.content
    }
    //使用vue对数据进行绑定
    var app = new Vue({
        el: '#app',
        data: {
            yizhu_detail: "",
            yizhu_detail_length: 0,
            checked_radio: false,
            select_tab_index: 0,
            yizhu_info: [], // 常用医嘱数据
        },
        methods: {
            add_yizhu: function (content) {
                this.yizhu_detail += content
            }
        },
        watch: {
            // 医嘱字数
            yizhu_detail: function (val) {
                this.yizhu_detail_length = val.length

                if (this.checked_radio == true) {
                    api.sendEvent({
                        name: 'save_changyongyizhu',
                        extra: {
                            content: this.yizhu_detail,
                            index: 0
                        }
                    });
                    app.$nextTick(function () {
                        hb_init_openwinby_click();
                    })

                } else if (this.checked_radio == false) {
                    api.sendEvent({
                        name: 'save_yizhu',
                        extra: {
                            content: this.yizhu_detail,
                            index: 1
                        }
                    });
                    app.$nextTick(function () {
                        hb_init_openwinby_click();
                    })
                }
            }
        },

    })

    // 输入医嘱的tab切换
    function select_tab(obj, index) {
        $('.tab_active').removeClass('tab_active');
        $(obj).addClass('tab_active')

        app.select_tab_index = index

        app.$nextTick(function () {
            hb_init_openwinby_click();
        })
    }

    function getData() {
        get_ajax("doctor/advice/listpage", {
            userid: 1,
            page: 1,
            pagesize: 10,
        }, function (res, err) {
            if (res.code == 200) {
                app.yizhu_info = res.data.data

                app.$nextTick(function () {
                    hb_init_openwinby_click();
                })
            } else {
                toast("网络不通畅，请稍后再试！")
            }
            if (err) {
                alert("网络不通畅，请稍后再试！")
            }
        })
    }
</script>